<template>
  <view>
    <u-navbar title="成绩查询" :autoBack="true" />
    <u-toast ref="uToast" />
    <u-loading-page :loading="loading" :iconSize="100" />
    <!-- 学年选择 -->
    <u-picker title="选择学年" :show="showyear" :immediateChange="true" :defaultIndex="[defaultIndex]" key-name="key" :columns="[years]" @confirm="yearChange" @cancel="showyear = false" />
    <!-- 学期选择 -->
    <u-picker title="选择学期" :show="showterm" :immediateChange="true" :defaultIndex="[defaultTerm]" :columns="[terms]" @confirm="termChange" @cancel="showterm = false" />
    <view class="header">
      <view class="header-title">当前查询</view>
      <view class="header-year">
        <u--text prefixIcon="arrow-down" iconStyle="top:4rpx;" :text="years[defaultYear].key" @click="showyear = true" />
      </view>
      <view class="header-term">
        <u--text prefixIcon="arrow-down" iconStyle="top:4rpx;" :text="terms[defaultTerm]" @click="showterm = true" />
      </view>
      <view class="header-btn">
        <u-button type="success" shape="circle" color="#2DE88D" size="small" text="查询" @click="getGrade"></u-button>
      </view>
    </view>
    <!-- 内容 -->
    <view class="content">
      <u-empty v-if="!score.length" icon="https://cdn.uviewui.com/uview/empty/data.png" :marginTop="100" />
      <view class="silk-ribbon-box shadow-lg radius-sm" v-for="(item, index) in score" :key="index">
      <view :class="item.score<60?'wrap-w':'wrap'">
        <label class="silk-ribbon">{{item.score<60?'你完啦':'通过啦'}}</label>
          <view class="p-4">
            <view class="text-14">课程：《{{item.name}}》</view>
            <view class="mt-2">成绩：<text class="text-lg" :class="item.score<60?'text-red':''">{{item.score}}分</text></view>
            <view class="mt-2">教师：{{item.teacher}}</view>
            <view class="mt-2">学分：{{item.credit}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGrade } from '@/api'
export default {
  data() {
    return {
      loading: true,
      showyear: false,
      showterm: false,
      score: [],
      terms: ['第一学期', '第二学期'],
      years: [],
      year: null,
      defaultYear: null,
      defaultIndex: 0,
      term: null,
      defaultTerm: null,
    }
  },
  watch: {},
  computed: {},
  methods: {
    // 获取成绩
    async getGrade() {
      const { year, term } = this;
      this.loading = true;
      const { code, message, data } = await getGrade({ year, term });
      this.loading = false;
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.score = data;
    },

    // 年份选择
    yearChange(e) {
      const { indexs, value } = e;
      this.showyear = false;
      this.defaultIndex = indexs[0];
      this.defaultYear = indexs[0];
      this.year = value[0].val;
    },

    // 学期选择
    termChange(e) {
      const { indexs, value } = e;
      this.showterm = false;
      this.defaultTerm = indexs[0];
      this.term = indexs[0] == 0 ? 1 : 2;
    },

    // 获取日期
    getDate() {
      const yIndex = new Date().getFullYear();
      const mIndex = new Date().getMonth() + 1;
      let years = [];
      let year = yIndex;
      let defaultYear = 0;
      let term = 1;
      let defaultTerm = 0;
      for (let y = yIndex - 3; y <= yIndex + 1; y++) {
        years.push({
          key: `${y}-${y + 1}年`,
          val: y
        });
      }
      if (mIndex >= 9 || mIndex <= 2) {
        let arr = [];
        years.forEach(item => { arr.push(item.val) });
        defaultYear = arr.indexOf(yIndex - 1);
        term = 1;
        defaultTerm = 0;
      }
      if (mIndex >= 3 || mIndex <= 8) {
        let arr = [];
        years.forEach(item => { arr.push(item.val) });
        defaultYear = arr.indexOf(yIndex - 1);
        year = yIndex - 1;
        term = 2;
        defaultTerm = 1;
      }
      this.years = years;
      this.year = year;
      this.term = term;
      this.defaultYear = defaultYear;
      this.defaultTerm = defaultTerm;
      const timer = setTimeout(() => {
        this.defaultIndex = defaultYear;
        clearTimeout(timer);
      }, 1000);
    },
  },

  // 页面加载
  onLoad() {
    this.getDate();
    this.getGrade();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss">
.header {
  position: fixed;
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  color: #666666;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  z-index: 999;

  &-title {
    width: 135rpx;
    padding: 10rpx;
    text-align: center;
  }

  &-year {
    width: 245rpx;
    padding: 10rpx;
    text-align: center;
  }

  &-term {
    width: 180rpx;
    padding: 10rpx;
    text-align: center;
  }

  &-btn {
    flex: 1;
    text-align: right;
    padding: 10rpx;
  }

}

.content {
  padding-top: 135rpx;

  .silk-ribbon-box {
    display: flex;
    justify-content: center;
    margin-left: 20rpx;
    width: 94%;
    height: 300rpx;
    position: relative;
    margin-bottom: 30rpx;
    border-radius: 6rpx;
    color: #666666;
    box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);

    .wrap {
      width: 100%;
      height: 320rpx;
      position: absolute;
      top: -6rpx;
      left: 6rpx;
      overflow: hidden;

      &::before {
        content: "";
        display: block;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
        width: 60rpx;
        height: 6rpx;
        position: absolute;
        right: 50rpx;
        background-color: #1dc069;
      }

      &::after {
        content: "";
        display: block;
        border-radius: 0px 5px 5px 0px;
        width: 6rpx;
        height: 60rpx;
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        background-color: #1dc069;
      }

      .silk-ribbon {
        position: absolute;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        width: 80px;
        height: 15px;
        line-height: 15px;
        top: 12px;
        right: -18px;
        z-index: 2;
        font-size: 8px;
        transform: rotate(45deg);
        background: #24f083;
        color: #fff;
        border: 1px dashed;
        box-shadow: 0 0 0 3px #24f083, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
      }
    }

    .wrap-w {
      width: 100%;
      height: 320rpx;
      position: absolute;
      top: -6rpx;
      left: 6rpx;
      overflow: hidden;

      &::before {
        content: "";
        display: block;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
        width: 60rpx;
        height: 6rpx;
        position: absolute;
        right: 50rpx;
        background-color: #ba2e26;
      }

      &::after {
        content: "";
        display: block;
        border-radius: 0px 5px 5px 0px;
        width: 6rpx;
        height: 60rpx;
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        background-color: #ba2e26;
      }

      .silk-ribbon {
        position: absolute;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        width: 80px;
        height: 15px;
        line-height: 15px;
        top: 12px;
        right: -18px;
        z-index: 2;
        font-size: 8px;
        transform: rotate(45deg);
        background: #e83a30;
        color: #fff;
        border: 1px dashed;
        box-shadow: 0 0 0 3px #e83a30, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
      }
    }
  }
}
</style>